<template>
    <view class="bg-white min-h-screen">
        <!-- 导航栏 -->
        <view class="px-4 py-3 border-b border-slate-100">
            <view class="flex justify-between items-center">
                <button class="p-2" @tap="goBack">
                    <text class="iconfont icon-arrow-left text-slate-800"></text>
                </button>
                <text class="text-lg font-medium text-slate-800">设置</text>
                <view class="w-10"></view>
            </view>
        </view>

        <!-- 设置列表 -->
        <view class="px-5 py-6">
            <!-- 账户设置 -->
            <view class="mb-6">
                <text class="text-sm text-slate-500 mb-2 block">账户设置</text>
                <view class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
                    <view class="p-4 flex justify-between items-center border-b border-slate-100"
                        @tap="navigateTo('/subPages/settings/profile')">
                        <text class="text-base text-slate-800">个人资料</text>
                        <text class="iconfont icon-chevron-right text-slate-300"></text>
                    </view>
                    <view class="p-4 flex justify-between items-center border-b border-slate-100"
                        @tap="navigateTo('/subPages/settings/account')">
                        <text class="text-base text-slate-800">账户安全</text>
                        <text class="iconfont icon-chevron-right text-slate-300"></text>
                    </view>
                    <view class="p-4 flex justify-between items-center"
                        @tap="navigateTo('/subPages/settings/notification')">
                        <text class="text-base text-slate-800">通知设置</text>
                        <text class="iconfont icon-chevron-right text-slate-300"></text>
                    </view>
                </view>
            </view>

            <!-- 应用设置 -->
            <view class="mb-6">
                <text class="text-sm text-slate-500 mb-2 block">应用设置</text>
                <view class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
                    <view class="p-4 flex justify-between items-center border-b border-slate-100">
                        <text class="text-base text-slate-800">深色模式</text>
                        <switch :checked="darkMode" @change="toggleDarkMode" color="#6366f1"
                            style="transform:scale(0.8)" />
                    </view>
                    <view class="p-4 flex justify-between items-center border-b border-slate-100"
                        @tap="navigateTo('/subPages/settings/language')">
                        <text class="text-base text-slate-800">语言</text>
                        <view class="flex items-center">
                            <text class="text-sm text-slate-500 mr-2">简体中文</text>
                            <text class="iconfont icon-chevron-right text-slate-300"></text>
                        </view>
                    </view>
                    <view class="p-4 flex justify-between items-center" @tap="clearCache">
                        <text class="text-base text-slate-800">清除缓存</text>
                        <view class="flex items-center">
                            <text class="text-sm text-slate-500 mr-2">{{ cacheSize }}</text>
                            <text class="iconfont icon-chevron-right text-slate-300"></text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 关于 -->
            <view class="mb-6">
                <text class="text-sm text-slate-500 mb-2 block">关于</text>
                <view class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
                    <view class="p-4 flex justify-between items-center border-b border-slate-100"
                        @tap="navigateTo('/subPages/settings/about')">
                        <text class="text-base text-slate-800">关于我们</text>
                        <text class="iconfont icon-chevron-right text-slate-300"></text>
                    </view>
                    <view class="p-4 flex justify-between items-center border-b border-slate-100"
                        @tap="navigateTo('/subPages/settings/privacy')">
                        <text class="text-base text-slate-800">隐私政策</text>
                        <text class="iconfont icon-chevron-right text-slate-300"></text>
                    </view>
                    <view class="p-4 flex justify-between items-center" @tap="navigateTo('/subPages/settings/terms')">
                        <text class="text-base text-slate-800">用户协议</text>
                        <text class="iconfont icon-chevron-right text-slate-300"></text>
                    </view>
                </view>
            </view>

            <!-- 版本信息 -->
            <view class="p-4 flex justify-between items-center">
                <text class="text-sm text-slate-500">当前版本</text>
                <view class="flex items-center">
                    <text class="text-sm text-slate-500">v1.0.0</text>
                    <view class="ml-2 px-2 py-half bg-indigo-100 rounded-full" v-if="hasUpdate">
                        <text class="text-xs text-indigo-600">有更新</text>
                    </view>
                </view>
            </view>

            <!-- 退出登录 -->
            <view class="mt-6">
                <button class="w-full py-3 rounded-lg bg-red-50 text-red-500 font-medium" @tap="logout">
                    退出登录
                </button>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 状态
const darkMode = ref(false);
const cacheSize = ref('2.5MB');
const hasUpdate = ref(true);

// 初始化
onMounted(() => {
    // 从本地存储加载设置
    try {
        const settings = uni.getStorageSync('settings');
        if (settings) {
            const parsedSettings = JSON.parse(settings);
            darkMode.value = parsedSettings.darkMode || false;
        }
    } catch (e) {
        console.error('Failed to load settings', e);
    }

    // 获取缓存大小
    getCacheSize();

    // 检查更新
    checkUpdate();
});

// 切换深色模式
const toggleDarkMode = (e: any) => {
    darkMode.value = e.detail.value;

    // 保存设置
    try {
        const settings = {
            darkMode: darkMode.value
        };
        uni.setStorageSync('settings', JSON.stringify(settings));
    } catch (e) {
        console.error('Failed to save settings', e);
    }

    // 应用深色模式
    applyDarkMode();
};

// 应用深色模式
const applyDarkMode = () => {
    // 实际应用中，这里会有更复杂的逻辑来切换应用的主题
    console.log(`应用${darkMode.value ? '深色' : '浅色'}模式`);
};

// 获取缓存大小
const getCacheSize = () => {
    // 实际应用中，这里会调用平台API获取缓存大小
    // 这里使用模拟数据
    setTimeout(() => {
        cacheSize.value = '2.5MB';
    }, 500);
};

// 清除缓存
const clearCache = () => {
    uni.showModal({
        title: '清除缓存',
        content: '确定要清除应用缓存吗？',
        success: (res) => {
            if (res.confirm) {
                // 显示加载中
                uni.showLoading({
                    title: '清除中...'
                });

                // 模拟清除过程
                setTimeout(() => {
                    uni.hideLoading();
                    cacheSize.value = '0KB';

                    uni.showToast({
                        title: '缓存已清除',
                        icon: 'success'
                    });
                }, 1500);
            }
        }
    });
};

// 检查更新
const checkUpdate = () => {
    // 实际应用中，这里会调用API检查是否有新版本
    // 这里使用模拟数据
    setTimeout(() => {
        hasUpdate.value = true;
    }, 1000);
};

// 退出登录
const logout = () => {
    uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: (res) => {
            if (res.confirm) {
                // 清除登录状态
                uni.removeStorageSync('token');
                uni.removeStorageSync('userInfo');

                // 跳转到登录页
                uni.reLaunch({
                    url: '/pages/login/index'
                });
            }
        }
    });
};

// 页面导航
const navigateTo = (url: string) => {
    uni.navigateTo({
        url
    });
};

// 返回上一页
const goBack = () => {
    uni.navigateBack();
};
</script>

<style>
/* 添加额外的图标 */
.icon-arrow-left:before {
    content: '\e628';
}

.icon-chevron-right:before {
    content: '\e629';
}
</style>